import React, { useEffect, useState } from 'react'
import $axios from '../../utils/axios';
import { Button, Checkbox, Form, Input,Select,DatePicker, Table,Space } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
const { Option } = Select;
const { RangePicker } = DatePicker;
const onFinish = (values: any) => {
  console.log('Success:', values);
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

export default function RecordService() {
  interface DataType {
    id: string
    iname: string
    number: string
    rIDCard: string
    rname: string
    rtel: string
    sname: string
    status: string
    submissionTime: string
    key?: string
    render?: () => void | any
  }
  //服务数据
  const [allServerData, setAllServerData] = useState([])
  //机构数据
  const [allOrgan, setAllOrgan] = useState([])
  //对应的团队数据
  const [teamData, setTeamData] = useState([])
  //服务包数据
  const [serverPack, setServerPack] = useState([])
  const [form] = Form.useForm();
  const dateFormat = 'YYYY-MM-DD';
  const [date, setDate] = useState<any>('')
  //获取服务数据
  const getAllServerData = () => {
    $axios({
      url: '/api/getSDRSSIBySOTSTSPage',
      method: 'POST',
    }).then(res => {
      console.log('服务数据', res.data);
      let aa = res.data.filter((item:any)=>{
         if(item.status==3){
          return item
         }
         
      })
      setAllServerData(aa)
      // setAllServerData(res.data)
    })
  }
  //获取所有机构
  const getAllOrgan = () => {
    $axios({
      url: '/api/getAllChcsOrgan',
      method: 'POST'
    }).then(res => {
      console.log('所有机构', res.data.rows);
      let aa = res.data.rows.map((item: { name: any; id: any; }) => {
        return {
          value: item.id,
          label: item.name,
        }
      })
      setAllOrgan(aa)
    })
  }
  //获取团队信息
  const getTeam = (data: any) => {
    console.log('父组件接收', data);
    $axios({
      url: '/api/getTeamByOrganId',
      method: 'POST',
      data: { organId: data }
    }).then(res => {
      console.log('机构对应的团队信息', res.data);
      let aa = res.data.map((item: { name: any; id: any; }) => {
        return {
          value: item.id,
          label: item.name,
        }
      })
      setTeamData(aa)
    })
  }
  //获取服务包数据
  const getServerPack = () => {
    $axios({
      url: '/api/getAllChcsService',
      method: 'POST'
    }).then(res => {
      console.log('所有服务包', res.data.rows);
      let aa = res.data.rows.map((item: { name: any; id: any; }) => {
        return {
          value: item.id,
          label: item.name,
        }
      })
      setServerPack(aa)
    })
  }
  //表头
  const columns: ColumnsType<DataType> = [
    {
      title: '编号',
      dataIndex: 'number',
      key: 'number',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '姓名',
      dataIndex: 'rname',
      key: 'rname',
    },
    {
      title: '身份证',
      dataIndex: 'rIDCard',
      key: 'rIDCard',
    },
    {
      title: '手机号',
      dataIndex: 'rtel',
      key: 'rtel',
    },
    {
      title: '服务状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => {
        if (status == 0) {
          return <a style={{ color: '#3dd4a7' }}>待审核</a>
        } else if (status == 1) {
          return <a style={{ color: '#fddb78' }}>待支付</a>
        } else if (status == 2) {
          return <a style={{ color: '#f87495' }}>已驳回</a>
        } else if (status == 3) {
          return <a style={{ color: '#fddb78' }}>生效中</a>
        } else if (status == 4) {
          return <a style={{ color: '#000' }}>已过期</a>
        }
      }
    },
    {
      title: '服务包',
      dataIndex: 'sname',
      key: 'sname',
    },
    {
      title: '服务项目',
      dataIndex: 'iname',
      key: 'iname',
    },
    {
      title: '申请时间',
      dataIndex: 'submissionTime',
      key: 'submissionTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => { checkDetail(record) }}>查看详情</a>
        </Space>
      ),
    },
  ];
  //表格数据源
  const data: DataType[] = allServerData
  const onDateChange = (
    value: DatePickerProps['value'] | RangePickerProps['value'],
    dateString: [string, string] | string,
  ) => {
    console.log('Selected Time: ', value);
    setDate(dateString)
    console.log('Formatted Selected Time: ', dateString);
  };
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };

  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
    getTeam(value)
  };
  //查看详情并传数据
  const checkDetail = (data: any) => {
    // setCurrentData(data)
    // setDetailVisible(true)
  }
  useEffect(() => {
    getAllServerData()
    getAllOrgan()
    getServerPack()
  }, [])
  ///////////////////////////////////////////
  return (
    <div style={{background:'#fff',margin:'0 50px',padding:'20px'}}>
      <h3>服务记录</h3>
      <Form
            form={form}
            name="control-hooks"
            onFinish={onFinish}
            style={{ display: 'flex', flexWrap: 'wrap' }}
          >
            <Form.Item name="status" label="状态">
              <Select
                style={{ width: 120 }}
                onChange={handleChange}
                options={[
                  { value: 0, label: '待审核' },
                  { value: 1, label: '待服务' },
                  { value: 2, label: '已驳回' },
                ]}
              />
            </Form.Item>
            <Form.Item name="organId" label="签约机构">
              <Select
                style={{ width: 300 }}
                onChange={handleChange}
                options={allOrgan}
              />
            </Form.Item>
            <Form.Item name="teamId" label="医生团队">
              <Select
                style={{ width: 200 }}
                onChange={handleChange}
                options={teamData}
              />
            </Form.Item>
            <Form.Item name="serviceId" label="服务包">
              <Select
                style={{ width: 200 }}
                onChange={handleChange}
                options={serverPack}
              />
            </Form.Item>
            <Form.Item name="times" label="预约时间">
              <RangePicker onChange={onDateChange} format={dateFormat}></RangePicker>
            </Form.Item>
            <Form.Item name="searchKey" label="搜索">
              <Input placeholder='请输入关键字' />
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit">
                导出
              </Button>
            </Form.Item>
          </Form>
          <Table rowSelection={{ type: selectionType, ...rowSelection }} columns={columns} dataSource={data} rowKey='id' />
    </div>
  )
}
